<template>
  <div>
    <div class="personage_header">
      <div class="personage_IU">
        <!-- <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604932719549&di=a73a1e647bb45d6fe24c7935e607e8c4&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201907%2F26%2F20190726111337_jagvw.thumb.1000_0.jpeg "
          alt=""
        /> -->
        <van-uploader :after-read="afterRead" />
        <span>积分：365</span>

        <p class="login" @click="gologin">登录</p>
        <p class="login" @click="loginout">退出登录</p>
      </div>
    </div>
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
      color="red"
    />
    <div class="Stay_Moey_color"></div>
    <div class="Stay_Moey_container">
      <span>我的订单</span>
      <span>></span>
    </div>
    <div class="Stay_Moey_grid">
      <div>
        <p class="iconfont icon-daifukuan"></p>
        <p class="Stay_Moey_two">待付款</p>
      </div>
      <div>
        <p class="iconfont icon-daifahuo"></p>
        <p class="Stay_Moey_two">待发货</p>
      </div>
      <div>
        <p class="iconfont icon-daishouhuo"></p>
        <p class="Stay_Moey_two">待收货</p>
      </div>
      <div>
        <p class="iconfont icon-daipingjia"></p>
        <p class="Stay_Moey_two">待评价</p>
      </div>
    </div>
    <div class="Stay_Moey_box"></div>

    <div class="Stay_Moey_list">
      <div class="Stay_Moey_item">
        <img src="../../assets/img/1.png" alt="" />
        <p>我的余额</p>
      </div>
      <div class="Stay_Moey_item">
        <img src="../../assets/img/2.png" alt="" />
        <p>我的砍价</p>
      </div>
      <div class="Stay_Moey_item">
        <img src="../../assets/img/3.png" alt="" />
        <p>我的礼券</p>
      </div>
      <div class="Stay_Moey_item">
        <img src="../../assets/img/4.png" alt="" />
        <p>我的收藏</p>
      </div>
      <div class="Stay_Moey_item" @click="goaddress">
        <img src="../../assets/img/5.png" alt="" />
        <p>我的地址</p>
      </div>
      <div class="Stay_Moey_item">
        <img src="../../assets/img/6.png" alt="" />
        <p>联系客服</p>
      </div>
    </div>

    <div class="Stay_Moey_upbox">The work of liu tao</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    gologin() {
      this.$router.push("/login");
      this.isShow = true;
    },
    loginout() {
      if (localStorage.getItem("token")) {
        localStorage.removeItem("token");
        alert("退出成功");
        this.$router.push("/login");
      }
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    goaddress(){
      this.$router.push("/myaddress")
    }
  },
};
</script>

<style scoped>
.personage_container {
  width: 100%;
}
.personage_header {
  width: 100%;
  height: 3rem;
  background-color: rgb(212, 176, 130);
  display: flex;
  align-items: center;
}
.personage_IU {
  width: 4rem;
}
.personage_header img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  margin-left: 0.4rem;
}
.personage_IU span {
  margin-left: 0.4rem;
  color: white;
}
.personage_IU p {
  margin-left: 2rem;
  font-size: 0.25rem;
  color: white;
  cursor: pointer;
}
.Stay_Moey_color {
  width: 100%;
  height: 0.3rem;
  background-color: rgb(238, 237, 237);
}
.Stay_Moey_container {
  width: 100%;
  height: 1rem;
  /* background-color: coral; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0rem 0.5rem;
  border-bottom: 1px solid rgb(238, 237, 237);
}
.Stay_Moey_grid {
  width: 100%;
  height: 1.5rem;
  /* background-color: cornsilk; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.Stay_Moey_grid .iconfont {
  font-size: 0.6rem;
  color: gray;
}
.Stay_Moey_two {
  color: gray;
}
.Stay_Moey_box {
  width: 100%;
  height: 0.3rem;
  background-color: rgb(238, 237, 237);
}
.Stay_Moey_list {
  width: 100%;
  height: 3.5rem;
  /* background-color: crimson; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.Stay_Moey_item {
  width: 30%;
  text-align: center;
}
.Stay_Moey_item img {
  width: 0.7rem;
  height: 0.7rem;
}
.Stay_Moey_upbox {
  width: 100%;
  height: 0.4rem;
  background-color: rgb(238, 236, 236);
  font-size: 0.3rem;
  color: rgb(131, 130, 130);
  text-align: center;
  line-height: 0.4rem;
}
</style>